<template>
  <div class="RightContainer">
    <div class="right-header">
      <ul class="header-title">
        <li :class="type === 1 ? 'show' : ''">
          <a
            href="###"
            :class="type === 1 ? 'active' : ''"
            @click="changeType(1, $event)"
          >
            热门游记
          </a>
        </li>
        <li :class="type === 2 ? 'show' : ''">
          <a
            href="###"
            :class="type === 2 ? 'active' : ''"
            @click="changeType(2, $event)"
          >
            最新发表
          </a>
        </li>
      </ul>
      <div class="write">
        <i></i>
        <a href="###">写游记</a>
      </div>
    </div>
    <div class="right-middle">
      <ul class="middle-list">
        <li
          class="middle-item"
          v-for="item in travelnotelist"
          :key="item.id"
          @click="
            $router.push({
              name: 'Travelarticles',
              query: item,
            })
          "
        >
          <img :src="item.picUrl" alt="" />
          <div class="article-wrapper">
            <h2>
              {{ item.title }}
            </h2>
            <p>
              <a href="###">
                我们又出门咧。
                在2021年4月的明媚春光里，在素有“八山一水一分田”的绿色大胡建，
                我们不急不赶，随遇而安的逛了20天。
                这是一个平均年龄不小的旅行团。成员包括： ✔️一个72岁的小老头儿...
              </a>
            </p>
            <div class="article-bottom">
              <div class="article-left">
                <i class="article-location"></i>
                <a href="###">{{ item.address }},by</a>
                <span>作者:</span>
                <img :src="item.avater" class="authorImg" />
                <span class="article-author">{{ item.username }}</span>
                <i class="article-count"></i>
                <span>{{ item.watch }}/{{ item.favour }}</span>
              </div>
              <div class="article-right">
                <span>{{ item.enjoy }}</span>
                <a href="###" class="article-top"></a>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <el-pagination
        :current-page="page"
        :page-sizes="[6, 8, 10, 12, 14, 16]"
        :page-size="limit"
        layout="prev, pager, next , total , sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { scrollAnimation } from "../../../utils/scrollAnimation";
export default {
  name: "BottomRight",
  data() {
    return {
      page: 1,
      limit: 10,
      mytravelnotelist: this.travelnotelist,
    };
  },
  computed: {
    ...mapState("home", ["type", "travelnotelist"]),
    total() {
      return this.type === 1 ? 22 : 15;
    },
  },
  methods: {
    ...mapActions("home", ["getArticle"]),
    async changeType(type) {
      let { page, limit } = this;
      await this.getArticle({ type, limit, page });
      scrollAnimation(document.documentElement.scrollTop, 777);
      // window.scrollTo(0, 777)
    },
    async handleSizeChange(limit) {
      this.limit = limit;
      let { type, page, total } = this;
      if (page > Math.ceil(total / limit)) {
        page = Math.ceil(total / limit);
      }
      await this.getArticle({ type, limit, page });
      scrollAnimation(document.documentElement.scrollTop, 777);
      // window.scrollTo(0, 777)
    },
    async handleCurrentChange(page) {
      this.page = page;
      let { type, limit } = this;
      await this.getArticle({ type, limit, page });
      scrollAnimation(document.documentElement.scrollTop, 777);
      // window.scrollTo(0, 777)
    },
  },
};
</script>

<style lang="stylus" scoped>
.right-middle {
  padding-bottom: 30px;
}

.RightContainer {
  width: 700px;

  .right-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    height: 36px;
    border-bottom: 1px solid #e4e4e4;

    .header-title {
      display: flex;

      li {
        width: 120px;
        padding: 0 0 6px 0;
        text-align: center;

        &.show {
          border-bottom: 3px solid #ff9d00;
        }
      }

      a {
        font-size: 18px;

        &.active {
          color: #ff9d00;
        }
      }
    }

    .write {
      width: 140px;
      height: 36px;
      line-height: 36px;
      background-color: #ff9d00;
      color: #fff;
      text-align: center;
      border-radius: 4px;

      i {
        display: inline-block;
        margin-right: 5px;
        width: 18px;
        height: 17px;
        background-image: url('../../../static/images/index/sprite1.png');
        background-position: 0 0;
        background-position: 0px 0px;
        vertical-align: -3px;
      }

      a {
        display: inline-block;
        color: #fff;
        font-size: 16px;
      }
    }
  }
}

.middle-list {
  margin-bottom: 20px;
}

.middle-list .middle-item {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  height: 150px;
  cursor: pointer;

  &:hover {
    h2 {
      color: #ff9d00;
    }

    background-color: #f8f8f8;
    padding: 15px;
    margin: 0 -15px;
  }

  img {
    width: 220px;
    height: 150px;
    border: 0;
    vertical-align: middle;
  }

  .article-wrapper {
    width: 420px;

    h2 {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-bottom: 10px;
    }

    p {
      margin-bottom: 10px;
      font-size: 16px;
    }

    .article-bottom {
      display: flex;
      justify-content: space-between;
      font-size: 12px;

      .article-location, .article-count, .article-top {
        display: inline-block;
        background-image: url('../../../static/images/index/sprite1.png');
        background-repeat: no-repeat;
      }

      .article-location {
        margin: 8px 5px 0 0;
        width: 14px;
        height: 16px;
        background-position: 0 -50px !important;
      }

      .article-count {
        margin: 10px 5px 0 0;
        width: 18px;
        height: 14px;
        background-position: -30px -50px !important;
      }

      .authorImg {
        margin-left: 5px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
      }

      .article-author {
        color: #ff9d00;
        margin: 0 5px;
      }

      .article-top {
        margin-left: 8px;
        width: 38px;
        height: 33px;
        background-position: -60px 0 !important;
      }

      .article-right {
        display: flex;
        align-items: center;

        span {
          display: inline-block;
          color: #ff9d00;
        }
      }
    }
  }
}

.el-pagination__jump {
  float: right;
}

.el-pagination__sizes {
  float: right;
}
</style>